<template>
  <div class="player-profile-page">
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>选手档案</h2>
          <p>查看和管理选手详细信息</p>
        </div>
      </div>
    </el-card>

    <el-card class="profile-card">
      <div class="profile-content">
        <div class="profile-avatar">
          <el-avatar :size="120" :src="playerInfo.avatar">
            <el-icon size="60"><User /></el-icon>
          </el-avatar>
          <h3>{{ playerInfo.name }}</h3>
          <el-tag :type="getLevelType(playerInfo.level)" size="large">
            {{ getLevelText(playerInfo.level) }}
          </el-tag>
        </div>
        
        <div class="profile-info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名">{{ playerInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ playerInfo.gender === 'male' ? '男' : '女' }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ playerInfo.age }}岁</el-descriptions-item>
            <el-descriptions-item label="等级">{{ getLevelText(playerInfo.level) }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ playerInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ playerInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="加入时间">{{ playerInfo.join_date }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(playerInfo.status)">
                {{ getStatusText(playerInfo.status) }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <el-card class="stats-card">
      <template #header>
        <span>比赛统计</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">24</div>
            <div class="stat-label">总比赛数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">18</div>
            <div class="stat-label">胜利场次</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">6</div>
            <div class="stat-label">失败场次</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">75%</div>
            <div class="stat-label">胜率</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="matches-card">
      <template #header>
        <span>最近比赛</span>
      </template>
      <vxe-table :data="recentMatches" border stripe>
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column field="tournament_name" title="赛事名称" width="150"></vxe-column>
        <vxe-column field="opponent" title="对手" width="120"></vxe-column>
        <vxe-column field="result" title="结果" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.result === 'win' ? 'success' : 'danger'">
              {{ row.result === 'win' ? '胜利' : '失败' }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column field="score" title="比分" width="100" align="center"></vxe-column>
        <vxe-column field="match_time" title="比赛时间" width="180"></vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 选手信息
const playerInfo = ref({
  id: 1,
  name: '张三',
  gender: 'male',
  age: 25,
  level: 'intermediate',
  phone: '13800138001',
  email: 'zhangsan@example.com',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  join_date: '2024-01-15',
  status: 'active'
})

// 最近比赛数据
const recentMatches = ref([
  {
    id: 1,
    tournament_name: '2024春季赛',
    opponent: '李四',
    result: 'win',
    score: '3:1',
    match_time: '2024-03-15 14:30:00'
  },
  {
    id: 2,
    tournament_name: '2024春季赛',
    opponent: '王五',
    result: 'win',
    score: '3:2',
    match_time: '2024-03-20 16:00:00'
  },
  {
    id: 3,
    tournament_name: '2024夏季赛',
    opponent: '赵六',
    result: 'lose',
    score: '1:3',
    match_time: '2024-06-20 10:00:00'
  }
])

const getLevelType = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: 'info',
    intermediate: 'warning',
    advanced: 'success',
    professional: 'danger'
  }
  return levelMap[level] || 'info'
}

const getLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: '初级',
    intermediate: '中级',
    advanced: '高级',
    professional: '专业'
  }
  return levelMap[level] || '未知'
}

const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    active: 'success',
    inactive: 'info',
    suspended: 'warning',
    banned: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    active: '活跃',
    inactive: '非活跃',
    suspended: '暂停',
    banned: '禁用'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.player-profile-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.profile-card {
  margin-bottom: 20px;
}

.profile-content {
  display: flex;
  gap: 40px;
}

.profile-avatar {
  text-align: center;
  min-width: 200px;
}

.profile-avatar h3 {
  margin: 20px 0 10px 0;
  color: #303133;
  font-size: 24px;
}

.profile-info {
  flex: 1;
}

.stats-card,
.matches-card {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

.matches-card {
  min-height: 400px;
}
</style>
